<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="wode/team.css" rel="stylesheet" />
    <script src="style/jquery.js"></script>
    <title>我的资料</title>
    <script>
      document.addEventListener("gesturestart", function (event) {
        event.preventDefault();
      });
    </script>
    <style>
      #tianxie #tab11 {
        display: block !important;
      }
    </style>
    <script>
      $(function () {
        $("#hear li").click(function () {
          $(this)
            .css({
              color: "rgb(76, 143, 255)",
              height: "43px",
            })
            .siblings()
            .css({
              color: "rgb(102, 102, 102)",
              height: "45px",
            });
        });

        $("#hear li").click(function () {
          $(this).addClass("action").siblings().removeClass("action");
          var index = $(this).index();
          $("#contentop li")
            .eq(index)
            .css("display", "block")
            .siblings()
            .css("display", "none");
        });
      });
    </script>
    <style>
      .mask {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 999;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #85858580;
      }
      .input-dialog {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 80%;
        max-height: 80%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
      }
      .inputs {
        overflow-y: auto;
        flex: 1;
        padding: 10px 0;
      }
      .inputs > input {
        background: #fff;
      }
      .flex-box {
        display: flex;
      }
      .justify-content-center {
        justify-content: center;
      }
      .align-items-center {
        align-items: center;
      }
      .flex1 {
        flex: 1;
      }
      .radio-div {
        display: inline-block;
        width: 90%;
        border-radius: 3px;
        margin: 5px auto;
        background-color: #fff;
        padding: 15px 5px;
        text-indent: 0.93rem;
        text-align: left;
      }
      .input-container > input[type="button"] {
        background: #fff;
      }
      .item-title {
        color: rgb(117, 117, 117);
      }
      .input-label {
        margin-left: 20px;
        color: rgb(117, 117, 117);
      }
      .radio-div .input-element {
        display: inline-block;
        width: auto;
        width: 15px;
        height: 15px;
      }
      .list-item {
        position: relative;
      }
      .btn-container {
        text-align: center;
      }
      .btn-container > a {
        font-size: 14px;
        margin: 10px auto;
      }
      .close-btn {
        position: absolute;
        right: 10px;
        top: 10px;
      }
    </style>
  </head>
  <body>
    <div class="mask" style="display: none" id="showDialog">
      <div
        class="c1 input-dialog"
        style="
          text-align: center;
          background: #eee;
          padding: 10px;
          margin: 10px 0;
        "
      >
        <div class="close-btn" id="dialogCloseBtn">&#10006;</div>
        <h2
          style="
            color: #333;
            font-size: 16px;
            font-weight: normal;
            margin: 10px 0;
          "
        >
          填写负债信息
        </h2>
        <form class="inputs">
          <input
            type="text"
            name="loaStructure"
            autocomplete="off"
            placeholder="欠款机构"
          />
          <input
            type="text"
            name="loaAmount"
            autocomplete="off"
            placeholder="借款金额"
          />
          <input
            type="date"
            name="borrowinTime"
            autocomplete="off"
            placeholder="借款时间"
          />
          <input
            type="text"
            name="monthlyRepaymentAmount"
            autocomplete="off"
            placeholder="月还款金额"
          />
          <div class="radio-div checkbox-label flex-box align-items-center">
            <span class="item-title">是否有逾期</span>
            <label class="input-label">
              是
              <input
                class="input-element flex1"
                type="radio"
                name="isThereAnyOverdue"
                autocomplete="off"
                value="yes"
                placeholder="是否有逾期"
              />
            </label>
            <label class="input-label">
              否
              <input
                class="input-element flex1"
                type="radio"
                name="isThereAnyOverdue"
                autocomplete="off"
                value="no"
                placeholder="是否有逾期"
              />
            </label>
          </div>

          <label class="radio-div flex-box align-items-center">
            <span class="item-title">是否当前有逾期</span>
            <label class="input-label">
              是
              <input
                class="input-element flex1"
                type="radio"
                name="isThereAnyCurrentOverdue"
                autocomplete="off"
                value="yes"
                placeholder="是否当前有逾期"
              />
            </label>
            <label class="input-label">
              否
              <input
                class="input-element flex1"
                type="radio"
                name="isThereAnyCurrentOverdue"
                autocomplete="off"
                value="no"
                placeholder="是否当前有逾期"
              />
            </label>
          </label>
          <input
            type="text"
            name="overdueDuration"
            autocomplete="off"
            placeholder="逾期时长"
          />
        </form>
        <div class="baocun btn-container">
          <a
            href="javascript:"
            class="btn btn-primary btnbom"
            style="background: #ccc; color: #333; width: 30%; cursor: pointer"
            id="dialogSave"
            >保存</a
          >
        </div>
      </div>
    </div>
    <div class="header-out" style="display: block">
      <div class="back"><img src="style/back-icon.png" />关闭</div>
      <div>我的资料</div>
    </div>
    <div
      class="filling"
      style="width: 100%; height: 15vw; display: block"
    ></div>
    <script type="text/javascript" src="style/jquery.js"></script>
    <script>
      function is_weixn() {
        var ua = navigator.userAgent.toLowerCase();
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
          return true;
        } else {
          return false;
        }
      }
      if (is_weixn()) {
        $(".header-out").css("display", "none");
        $(".filling").css("display", "none");
      } else {
        $(".header-out").css("display", "block");
        $(".content-search").css("margin-top", "1.2rem");

        $(".filling").css("display", "block");
      }

      $(".back").click(function () {
        history.back();
      });
    </script>

    <div class="droplist">
      <div class="droplist-menu">
        <ul>
          <li>
            <a class="" style="color: #4c8fff" href="wode_ziliao.html"
              >个人资料</a
            >
          </li>

          <li>
            <a class="" href="wode_renzheng.html" style="color: #333"
              >申请认证</a
            >
          </li>
        </ul>
      </div>
      <div class="direct-team droplist-details">
        <ul id="contentop" class="droplist-list">
          <script type="text/javascript">
            function radioShow() {
              var myradio = document.getElementsByName("myradio");
              var div = document
                .getElementById("bczl")
                .getElementsByTagName("div");
              for (i = 0; i < div.length; i++) {
                if (myradio[i].checked) {
                  div[i].style.display = "block";
                } else {
                  div[i].style.display = "none";
                }
              }
            }
          </script>
          <form name="ck" action="">
            <fieldset style="border: none">
              <div class="zlxz">
                <h3>请按要求填写，如无负债请跳过保存即可！</h3>
                <!-- <label for="r1" class="red"><input name="myradio" id="r1" type="radio" value="" checked="checked" onclick="radioShow();" />有</label>
							<label for="r2" class="red"><input name="myradio" id="r2" type="radio" value=""  onclick="radioShow();" />无</label> -->
              </div>
              <div id="bczl">
                <div
                  class="c1"
                  id="tab11"
                  style="
                    text-align: center;
                    display: none;
                    background: #eee;
                    padding: 10px;
                    margin: 10px 0;
                  "
                >
                  <h2
                    style="
                      color: #333;
                      font-size: 16px;
                      font-weight: normal;
                      margin: 10px 0;
                    "
                  >
                    填写负债信息
                  </h2>
                  <input id="mobile" type="text" placeholder="房贷" />
                  <input id="mobile" type="text" placeholder="车贷" />
                  <input id="mobile" type="text" placeholder="信用卡" />
                  <input id="mobile" type="text" placeholder="其他贷款" />
                </div>
                <div id="tianxie">
                  <div
                    class="c1 list-item"
                    style="
                      text-align: center;
                      background: #eee;
                      padding: 10px;
                      margin: 10px 0;
                    "
                  >
                    <div class="close-btn">&#10006;</div>
                    <h2
                      style="
                        color: #333;
                        font-size: 16px;
                        font-weight: normal;
                        margin: 10px 0;
                      "
                    >
                      填写负债信息
                    </h2>
                    <div class="input-container">
                      <input type="button" value="房贷" />
                      <input type="button" value="车贷" />
                      <input type="button" value="信用卡" />
                      <input type="button" value="其他贷款" />
                    </div>
                  </div>
                </div>
                <div class="baocun">
                  <a
                    href="javascript:"
                    id="btn_addtr"
                    class="btn btn-primary btnbom"
                    style="
                      background: #ccc;
                      color: #333;
                      width: 30%;
                      cursor: pointer;
                    "
                    >增加负债选项</a
                  >
                </div>
                <!-- <div class="c2" style="display:none;width:90%;margin:0 auto;">
							<h2 style="font-size:18px;">请继续保持，再接再厉！</h2>
						</div> -->
              </div>
            </fieldset>
            <div class="baocun">
              <a type="submit" id="sumitDataBtn" class="btn btn-primary btnbom">保存</a>
            </div>
          </form>
          <script>
            $(function () {
              var show_count = 20; //要显示的条数

              var count = 1; //递增的开始值，这里是你的ID

              var submitDataTemplate = [
                {
                  loaStructure: "", //欠款机构
                  loaAmount: "", //借款金额
                  borrowinTime: "", //借款时间
                  monthlyRepaymentAmount: "", //月还款金额
                  isThereAnyOverdue: "", //是否有逾期
                  isThereAnyCurrentOverdue: "", //是否当前有逾期
                  overdueDuration: "", //逾期时长
                },
                {
                  loaStructure: "", //借款结构
                  loaAmount: "", //借款结构
                  borrowinTime: "", //借款时间
                  monthlyRepaymentAmount: "", //月还款金额
                  isThereAnyOverdue: "", //是否有逾期
                  isThereAnyCurrentOverdue: "", //是否当前有逾期
                  overdueDuration: "", //逾期时长
                },
                {
                  loaStructure: "", //借款结构
                  loaAmount: "", //借款结构
                  borrowinTime: "", //借款时间
                  monthlyRepaymentAmount: "", //月还款金额
                  isThereAnyOverdue: "", //是否有逾期
                  isThereAnyCurrentOverdue: "", //是否当前有逾期
                  overdueDuration: "", //逾期时长
                },
                {
                  loaStructure: "", //借款结构
                  loaAmount: "", //借款结构
                  borrowinTime: "", //借款时间
                  monthlyRepaymentAmount: "", //月还款金额
                  isThereAnyOverdue: "", //是否有逾期
                  isThereAnyCurrentOverdue: "", //是否当前有逾期
                  overdueDuration: "", //逾期时长
                },
              ];

              $("#btn_addtr").click(function () {
                var length = $("#tianxie > .c1").length;

                //alert(length);

                if (length < show_count) {
                  //点击时候，如果当前的数字小于递增结束的条件

                  $("#tianxie > .c1:first-child").clone().appendTo("#tianxie"); //在表格后面添加一行
                  submitData.push($.extend(true, [], submitDataTemplate));
                }
              });

              $("#dialogCloseBtn").click(function () {
                $("#showDialog").hide();
              });

              $("#dialogSave").click(function () {
                var {
                  inputContainerIndex,
                  currentElementIndex,
                } = twoDimensionIndex;
                var formData = $("#showDialog")
                  .hide()
                  .find("form.inputs")
                  .serializeArray();
                var obj = {};
                formData.forEach(function (item) {
                  console.log(item);
                  obj[item.name] = item.value;
                });
                submitData[inputContainerIndex][currentElementIndex] = obj;
              });

              var submitData = [
                [
                  {
                    loaStructure: "", //欠款机构
                    loaAmount: "", //借款金额
                    borrowinTime: "", //借款时间
                    monthlyRepaymentAmount: "", //月还款金额
                    isThereAnyOverdue: "", //是否有逾期
                    isThereAnyCurrentOverdue: "", //是否当前有逾期
                    overdueDuration: "", //逾期时长
                  },
                  {
                    loaStructure: "", //借款结构
                    loaAmount: "", //借款结构
                    borrowinTime: "", //借款时间
                    monthlyRepaymentAmount: "", //月还款金额
                    isThereAnyOverdue: "", //是否有逾期
                    isThereAnyCurrentOverdue: "", //是否当前有逾期
                    overdueDuration: "", //逾期时长
                  },
                  {
                    loaStructure: "", //借款结构
                    loaAmount: "", //借款结构
                    borrowinTime: "", //借款时间
                    monthlyRepaymentAmount: "", //月还款金额
                    isThereAnyOverdue: "", //是否有逾期
                    isThereAnyCurrentOverdue: "", //是否当前有逾期
                    overdueDuration: "", //逾期时长
                  },
                  {
                    loaStructure: "", //借款结构
                    loaAmount: "", //借款结构
                    borrowinTime: "", //借款时间
                    monthlyRepaymentAmount: "", //月还款金额
                    isThereAnyOverdue: "", //是否有逾期
                    isThereAnyCurrentOverdue: "", //是否当前有逾期
                    overdueDuration: "", //逾期时长
                  },
                ],
              ];

              $('#sumitDataBtn').click(function() {
                console.log(submitData);
              });

              var twoDimensionIndex = {
                inputContainerIndex: 0,
                currentElementIndex: 0,
              };
              $("#tianxie").on(
                "click",
                ".input-container > input[type=button]",
                function () {
                  var currentElement = $(this);
                  var currentElementIndex = currentElement.index();
                  var inputContainerIndex = currentElement
                    .parents(".c1")
                    .index();
                  console.log(inputContainerIndex, currentElementIndex);
                  twoDimensionIndex.inputContainerIndex = inputContainerIndex;
                  twoDimensionIndex.currentElementIndex = currentElementIndex;
                  $("#showDialog")
                    .show()
                    .find(".input-dialog > h2")
                    .text("填写负债信息——" + this.value);
                  var data =
                    submitData[inputContainerIndex][currentElementIndex];
                  console.log(data);
                  $(".input-dialog > .inputs input").each(function (
                    index,
                    element
                  ) {
                    if ("radio" === this.type) {
                      this.checked = data[this.name] === this.value;
                    }
                    if ("text" === this.type || "date" === this.type) {
                      this.value = data[this.name];
                    }
                  });
                }
              );
              $("#tianxie").on("click", ".close-btn", function () {
                var parent = $(this).parent();
                var index = parent.index();
                if (0 === index) {
                  alert("必需要有一个");
                  return;
                }
                parent.remove();
                submitData.splice(index, 1);
                console.log(index);
              });

              function inputCallback() {
                var {
                  inputContainerIndex,
                  currentElementIndex,
                } = twoDimensionIndex;
                var result =
                  submitData[inputContainerIndex][currentElementIndex];
                console.log(inputContainerIndex, currentElementIndex);
                console.log(result);
                console.log(this);
                result[this.name] = this.value;
              }
              // $(".input-dialog > .inputs > input").on("input", inputCallback);

              // $(".input-dialog > .inputs input[type=radio]").on(
              //   "change",
              //   inputCallback
              // );
            });

            function deltr(opp) {
              var length = $("#dynamicTable").length;

              //alert(length);

              if (length <= 1) {
                alert("至少保留一行");
              } else {
                $(opp).parent().parent().remove(); //移除当前行
              }
            }
          </script>
        </ul>
      </div>
    </div>
  </body>
</html>
